import React from 'react'
import { Outlet, Link } from 'react-router-dom'
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
const { Header, Content, Sider } = Layout;

const headerItem = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));

const menuData = [
  {
    key: '/',
    label: <Link to="/">工作台</Link>,
    icon: React.createElement(LaptopOutlined)
  },
  {
    key: '/activity',
    label: '活动管理',
    icon: <NotificationOutlined />,
    children: [
      {
        key: '/activity/list',
        label: <Link to="">所有活动</Link>
      },
      {
        key: '/activity/chart',
        label: <Link to="">活动数据</Link>
      }
    ]
  },
  {
    key: '/setting',
    icon: <UserOutlined />,
    label: <Link to="/setting">设置</Link>
  },
]

export default function MyLayout() {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} items={headerItem} />
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{
              height: '100%',
              borderRight: 0,
            }}
            items={menuData}
          />
        </Sider>
        <Layout
          style={{
            padding: '0 24px 24px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}
